<template>
  <div
    class="max-w-screen-md mx-auto overflow-y-auto bg-slate-50 h-full flex flex-col"
    v-loading="loading || shareLoading"
  >
    <div class="history-details">
      <div class="flex justify-between items-center p-1 bg-blue-100">
        <div class="flex items-center">
          <LolAvartar
            :size="40"
            :iconId="userHistoryDetails1.profileIcon ?? userHistory.profileIcon"
          />
          <div>
            <text class="ml-2 text-base">{{
              userHistory.nameInfoNew ?? userHistoryDetails1.riotIdGameName 
            }}</text>
            <div>
              <text class="ml-2 text-sm">{{
                userHistoryDetails1.fullDate ??
                parseTime(userHistoryDetails1.gameStartTimestamp)
              }}</text>
              <text class="ml-2 text-sm">{{
                userHistoryDetails1.competitionType ??
                levelConfig.game_mod[userHistoryDetails1.queueId]
              }}</text>
              <text class="ml-2 text-sm">{{
                userHistoryDetails1.competitionDuration ??
                secondsToHms(userHistoryDetails1.gameDuration)
              }}</text>
            </div>
          </div>
        </div>

        <el-icon color="#409efc" :size="24" @click="handleShare">
          <Share />
        </el-icon>
      </div>
      <div class="mt-2">
        <div
          class="flex pt-2"
          :class="{
            'bg-green-100': player.win,
            'bg-red-100': !player.win,
            'mt-2': playerIndex === 5
          }"
          v-for="(player, playerIndex) in userHistoryDetails1.participants"
          :key="playerIndex"
        >
          <div>
            <HeroAvatar
              :championId="player.championId"
              :damageMax="player.damageMax"
              :defenseMax="player.defenseMax"
              :killsMax="player.killsMax"
              :assistsMax="player.assistsMax"
              :pentaKills="player.pentaKills > 0"
              :size="32"
            />
          </div>

          <div class="ml-1">
            <LolAbility :iconId="player.spell1Id" />
            <LolAbility class="mt-1" :iconId="player.spell2Id" />
          </div>

          <div class="ml-1">
            <LolRunesperk :iconId="player.perks1" />
            <LolRunesperk class="mt-1" :iconId="player.perks2" />
          </div>

          <div class="ml-1">
            <div class="flex">
              <div v-for="equipIndex in 7" :key="equipIndex">
                <LolEquip :iconId="player[`item${equipIndex - 1}`]" />
              </div>
            </div>

            <div class="mt-1 text-sm">
              <text
                @click="goSO1HistoryList(player)"
                class="cursor-pointer"
                :class="{
                  'text-fuchsia-500': player.riotIdGameName?.includes(
                    userHistoryDetails1.riotIdGameName
                  )
                }"
                >{{ player.riotIdGameName }}</text
              >
              <text class="ml-1 text-blue-400">{{
                `${player.kills}/${player.deaths}/${player.assists}`
              }}</text>
              <text class="ml-1">
                <text class="text-sm">攻</text>
                <text :class="{ 'text-red-500': player.damageMax }"
                  >{{ (player.damageAll / 1000).toFixed(1) }}k</text
                >
              </text>
              <text class="ml-1">
                <text class="text-sm">承</text>
                <text :class="{ 'text-cyan-500': player.defenseMax }"
                  >{{ (player.bearingInjuries / 1000).toFixed(1) }}k</text
                >
              </text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import LolEquip from '@/components/LolEquip.vue'
import HeroAvatar from '@/components/HeroAvatar.vue'
import LolAbility from '@/components/LolAbility.vue'
import LolRunesperk from '@/components/LolRunesperk.vue'
import { Share } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { leagueSummoner, history_all } from '@/axios/api'
import { ElMessage } from 'element-plus'
import screenshot from '@/utils/screenshot'
import { parseTime, secondsToHms, handlerso1Data } from '@/utils/auth'
import { platformMap, levelConfig } from '@/utils/area.js'

const userHistory = ref({})

const loading = ref(false)

const router = useRouter()

async function goSO1HistoryList(player) {
  const userHistoryDetails = userHistoryDetails1.value ?? {}
  try {
    loading.value = true
    const res1 = await leagueSummoner({
      area: platformMap[userHistoryDetails.platformId],
      gameName: player.riotIdGameName,
      tagLine: player.riotIdTagline
    })
    if (res1?.success === false) {
      ElMessage({
        message: res1?.error?.message,
        type: 'error'
      })
      return
    }
    const data = res1?.data
    const res2 = await history_all({
      area: platformMap[userHistoryDetails.platformId],
      puuid: data.puuid,
      beginIdx: 0,
      count: 20
    })
    console.log('返回返沪i', res1, res2)
    const recordData = handlerso1Data({
      baseInfo: data,
      allrequestParams: [],
      list: res2?.data
    })
    localStorage.setItem('userHistory', JSON.stringify(recordData))
    router.push('/history')
  } catch (error) {
    console.log('错误2', error)
  } finally {
    loading.value = false
  }
}

const shareLoading = ref(false)

const userHistoryDetails1 = ref({})

function handleShare() {
  shareLoading.value = true
  screenshot('.history-details', '战绩详情').finally(
    () => (shareLoading.value = false)
  )
}

onActivated(() => {
  const userHistoryDetails = localStorage.getItem('userHistoryDetails')
  ? JSON.parse(localStorage.getItem('userHistoryDetails'))
  : {}
  
  userHistory.value = localStorage.getItem('userHistory')
  ? JSON.parse(localStorage.getItem('userHistory'))
  : {}
  userHistoryDetails1.value = userHistoryDetails
  console.log('出发了吗', userHistoryDetails)
})
</script>

<style lang="scss" scoped>
.team-info + .team-info {
  margin-left: 6px;
}
</style>
